<template>
	<div class="category">
		<div class="aside">
			<van-sidebar v-model="active">
				<van-sidebar-item v-for="item in typeList" :key="item.value" :title="item.text" />
			</van-sidebar>
		</div>
		<div class="list" v-if="typeList.length > 0">
			<!-- 下拉刷新 -->
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<van-card
						v-for="(item, index) in list"
						:key="item.id"
						class="card"
						:price="item.price"
						:title="item.name"
						:thumb="item.thumbs_text[0]"
						@click="$router.push('/product/info?proid=' + item.id)" />
				</van-list>
			</van-pull-refresh>
		</div>
		<van-loading size="24px" v-else>加载中...</van-loading>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const active = ref(0);
const typeList = ref([]);
const loading = ref(false);
const refreshing = ref(false);
const finished = ref(false);
const list = ref([]);
let count = 0;
let page = 1;
let limit = 8;

const route = useRoute();
const router = useRouter();

const activeId = ref(route.query.typeid ?? 0);

// 获取分类信息
const getTypes = async () => {
	const res = await proxy.$GET({
		url: '/index/types',
	});

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	typeList.value = typeList.value.concat(
		res.data.map((v) => {
			return { text: v.name, value: v.id + '' };
		})
	);

	if (activeId.value === 0) {
		activeId.value = typeList.value[0].value
	} else {
		active.value = typeList.value.findIndex((v) => v.value === activeId.value);
	}
};

// 获取商品列表
const getList = async () => {
	const data = {
		page,
		limit,
		typeid: activeId.value,
	};

	const res = await proxy.$GET({
		url: '/index/list',
		params: data,
	});

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return false;
	}

	list.value.push(...res.data.list);

	// typeName.value = res.data.typeName;
	count = res.data.count;

	return true;
};

// 下拉刷新
const onRefresh = async () => {
	count = 0;
	page = 1;
	finished.value = false;

	list.value = [];

	loading.value = true;

	console.log('refresh');

	onLoad();
};
// 上拉加载
const onLoad = async () => {
	if (refreshing.value) {
		refreshing.value = false;
	}

	console.log('load');

	const bool = await getList();

	loading.value = false;

	if (bool) {
		page++;

		if (count > 0 && page * limit > count) {
			finished.value = true;
		}
	} else {
		finished.value = true;
	}
};

watch(active, () => {
	if (typeList.value[active.value]) {
		activeId.value = typeList.value[active.value].value;

		router.replace({
			query: {
				typeid: activeId.value,
			},
		});
	}

	onRefresh();
});

getTypes();
</script>

<style scoped lang="scss">
.category {
	display: flex;
	margin-top: 50px;
	.aside {
		height: calc(100vh - 96px);
		overflow-y: auto;
		width: fit-content;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		position: sticky;
		top: 46px;
	}
	.aside::-webkit-scrollbar {
		width: 0px;
	}
	.list {
		flex: 1;
		.card {
			background-color: #fff;
			padding: 8px;
			margin-bottom: 8px;
			margin-left: 8px;
			margin-right: 8px;
			border-radius: 6px;
			:deep(.van-card__price) {
				color: #fe7923;
			}
		}
		:deep(.van-pull-refresh){
			height: 100%;
		}
	}
}
</style>
